<template>
<div class="container">
<!--  搜索框-->
  <div class="headerSearch">
    <el-card class="box-card" style="height: 75px;margin-bottom: 10px">
      <el-row type="flex">
        <el-col :span="5">
          <el-input
              placeholder="输入仓库名称"
              prefix-icon="el-icon-search"
              style="height: 30px"
              v-model="keyworld"

          >
          </el-input>
        </el-col>
        <el-col :span="6" style="margin-left: 5px">
          <el-button type="primary" plain icon="el-icon-search" @click="searchWarehouse">搜索仓库</el-button>
          <el-button type="primary" plain icon="el-icon-plus" @click="addWarehouse">添加仓库</el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>

  <el-card class="box-card" style="height: 450px">
    <el-row type="flex">
      <el-col :span="4">
        <el-tabs tab-position="left" style="height: 580px;" @tab-click="select" v-model="selectWarehouse">
          <el-tab-pane  v-for= "item in warehouseList" :label="item.warehouseName" :data-warehouseId="item.id" :name="item.id">

          </el-tab-pane>

        </el-tabs>
      </el-col>
      <el-col :span="20" :pull="2">
        <div class="header">
          <span style="color: deepskyblue;font-weight: 700">基本信息</span>

          <span style="margin-left: 5px"><a href="javascript:void(0)" style="color: orange;font-weight: 200" @click="updateWarehouseDialog">修改</a></span>
          <span style="margin-left: 5px"><a href="javascript:void(0)" style="color: orangered; font-weight: 200;" @click="delWarehouse">删除</a></span>
          <!--        内容展示区-->
          <div class="content" style="margin-left: -5px">
            
            <el-row type="flex">
              <el-col :span="5">仓库名称</el-col>
              <el-col :span="5">仓库编号</el-col>
              <el-col :span="5">仓库备注</el-col>
            </el-row>

            <el-row type="flex" style="margin-top: -13px">
              <el-col :span="5">{{warehouseName}}</el-col>
              <el-col :span="5">{{warehouseNumber}}</el-col>
              <el-col :span="5">{{remark}}</el-col>
            </el-row>
          </div>
          <div class="info">
            <el-tabs v-model="activeName" >
              <el-tab-pane label="库区信息" name="first" ></el-tab-pane>
              <el-tab-pane label=""></el-tab-pane>
            </el-tabs>
            <el-row type="flex">
              <el-col :span="5">
                <el-input
                    placeholder="输入库区名称"
                    prefix-icon="el-icon-search"
                    style="height: 30px">
                </el-input>
              </el-col>
              <el-col :span="6" style="margin-left: 5px">
                <el-button type="primary" plain icon="el-icon-plus" @click="addWarehouseArea">添加库区</el-button>
              </el-col>
            </el-row>
            <el-table
                :data="warehouseAreaList"
                style="width: 100%">


              <el-table-column
                  prop="reservoirAreaName"
                  label="库区名称"
                  width="140"
                  >
              </el-table-column>
              <el-table-column
                  prop="warehouseId"
                  width="140"
                  label="仓库名称">
              </el-table-column>
              <el-table-column
                  prop="reservoirAreaTypeCount"
                  width="140"
                  label="库区货品分类数量">
              </el-table-column>
              <el-table-column
                  prop="createUser"
                  width="140"
                  label="创建人">
              </el-table-column>
              <el-table-column
                  prop="createTime"
                  width="140"
                  label="创建时间">
              </el-table-column>
              <el-table-column
                  prop="lastUpdateUser"
                  width="140"
                  label="最后一次修改用户">
              </el-table-column>
              <el-table-column
                  prop="lastUpdateTime"
                  width="140"
                  label="最后一次修改时间">
              </el-table-column>
              <el-table-column
                  fixed="right"
                  label="操作"
                  width="160">
                <template slot-scope="scope">
                  <el-button @click="findwarehouseArea(scope.row.id)" type="text" size="small">查看库区</el-button>
<!--                  <el-button @click="updateWarehouseArea(scope.row)" type="text" size="small">修改</el-button>-->
                  <el-button type="text" size="small" @click="delWarehouseArea(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>


<!--        查看库区下面的储位信息-->



      </el-col>
    </el-row>
  </el-card>

<!--  储位信息对话框-->
  <el-dialog title="储位信息" :visible.sync="showPosition" width="86%" @open="openPosition">
    <position></position>
  </el-dialog>

<!--  修改仓库对话框-->
<!--  <el-dialog title="修改仓库信息" :visible.sync="showUpdateWarehouse" @open="openUpdateWarehouse">-->
<!--    <updatewarehouse></updatewarehouse>-->

<!--  </el-dialog>-->

<!--  添加仓库对话框-->
  <el-dialog title="添加仓库" :visible.sync="showAddWarehouse">
    <addwarehouse></addwarehouse>
  </el-dialog>

</div>
</template>

<script>
import axios from "axios";
import position from "@/components/warehouse/position";
import updatewarehouse from "@/components/warehouse/updatewarehouse";
import addwarehouse from "@/components/warehouse/addwarehouse";

export default {
  name: "warehouse",
  data(){
    return{
      warehouseList:[],
      warehouseAreaList:[],
      warehouseName:'我的测试仓库',
      warehouseNumber:'我的仓库编号',
      remark:"我的备注",
      activeName:"first",
      warehouseAreaId:null,
      showPosition:false,
      nowWarehouseIndex: 0,
      selectWarehouse:'',
      showAddWarehouse:false,
      openAddPosition:false,
      keyworld:'',
    }
  },
  components:{
    position,
    updatewarehouse,
    addwarehouse
  },
  methods: {
    //添加仓库
    addWarehouse() {
      this.showAddWarehouse = true
    },
    //刷新数据
    flushData(del) {
      //刷新仓库数据
      axios.get("http://localhost:8080/api/warehouse/findAll").then(resp => {
        let data = resp.data.data;
        this.warehouseList = data;
        let warehouseId = null;
        if (this.warehouseList != null && this.warehouseList.length >= 1 && !del) {
          this.warehouseName = this.warehouseList[this.nowWarehouseIndex].warehouseName;
          this.warehouseNumber = this.warehouseList[this.nowWarehouseIndex].id;
          this.remark = this.warehouseList[this.nowWarehouseIndex].remark;
          warehouseId = this.warehouseList[this.nowWarehouseIndex].id;
        }
        //是删除
        else if (del) {
          if (this.warehouseList != null && this.warehouseList.length >= 1) {
            this.warehouseName = this.warehouseList[0].warehouseName;
            this.warehouseNumber = this.warehouseList[0].id;
            this.remark = this.warehouseList[0].remark;
            warehouseId = this.warehouseList[0].id;
          }
        }
        //重新加载库区信息
        if (del) {
          axios.get("http://localhost:8080/api/warehouseArea/findListByWarehouseId/" + warehouseId)
              .then(resp => {

                if (resp.data.code == 200) {
                  this.warehouseAreaList = resp.data.data
                } else this.$message({
                  message: resp.data.msg,
                  type: 'error'
                })
              })
        }
        //设置当前激活的仓库选项
        this.selectWarehouse = warehouseId;
      })

    },
    openUpdateWarehouse() {
      let obj = this.warehouseList[this.nowWarehouseIndex];
      setTimeout(() => {
        this.$bus.$emit("warehouse/updatewarehouse", obj)
      }, 0)
    },
    //删除仓库
    delWarehouse() {
      this.$confirm('是否永久删除该仓库信息', '是否继续', '提示', {
        confirmButtonText: "确认",
        cancelButtonText: "取消"
      }).then(() => {
        let tabindex = this.nowWarehouseIndex;
        let warehouseObj = this.warehouseList[tabindex];

        let warehouseId = warehouseObj.id;

        axios({
          url: "http://localhost:8080/api/warehouse/delete/" + warehouseId,
          method: 'delete'
        }).then((resp) => {
          if (resp.data.code == 200) {
            this.$message({
              message: resp.data.msg,
              type: 'success'
            })
            //刷新数据
            this.flushData(true)
          } else this.$message({
            message: resp.data.msg,
            type: 'error'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })

    },
    openAddPositionS(){
      setTimeout(()=>{
        this.$bus.$emit('giveMeWarehouseAreaId',this.warehouseAreaId)
      },0)
    },
    select(obj) {
      let tabsId = obj.index;
      //修改仓库基本信息
      this.warehouseName = this.warehouseList[tabsId].warehouseName;
      this.warehouseNumber = this.warehouseList[tabsId].id;
      this.remark = this.warehouseList[tabsId].remark;
      let warehouseId = this.warehouseList[tabsId].id;
      this.nowWarehouseIndex = tabsId
      this.selectWarehouse = warehouseId
      //查询数据
      axios.get("http://localhost:8080/api/warehouseArea/findListByWarehouseId/" + warehouseId)
          .then(resp => {
            this.warehouseAreaList = resp.data.data;
          })
    },

    updateWarehouseDialog() {
      this.showUpdateWarehouse = true
    },

    //删除库区
    delWarehouseArea() {

    },
    //查看储位信息
    findwarehouseArea(id) {
      this.warehouseAreaId=id;
      //打开查看库区对话框
      this.showPosition=true;
    },
    openPosition() {
      setTimeout(() => {
        axios.get("http://localhost:8080/api/position/findListByWarehouseAreaId/"+this.warehouseAreaId)
            .then(resp=>{
              if (resp.data.code!=200){
                this.$message({
                  message:resp.data.msg,
                  type:'error'
                })
              }
              this.$bus.$emit("position", this.warehouseAreaId,resp.data.data)
            })

      }, 0)
    },
    //搜索仓库
    searchWarehouse(){
      axios({
        method:'get',
        url:"http://localhost:8080/api/warehouse/findByNameLike?keyWorld="+this.keyworld

      }).then((resp)=>{
        if (resp.data.code==200){
          this.warehouseList=resp.data.data;
          this.selectWarehouse=this.warehouseList[0].id
          //设置库区信息
          if (this.warehouseList!=null&&this.warehouseList.length>=1){
            axios({
              url:'http://localhost:8080/api/warehouseArea/findListByWarehouseId/'+this.warehouseList[0].id,
              method:'get'
            }).then(resp=>{
              if (resp.data.code==200)
              this.warehouseAreaList=resp.data.data;
            })
          }
          else this.warehouseAreaList=null;
        }
      })
    },
    //添加库区

    addWarehouseArea(){

    }
  },
  mounted() {
    this.$bus.$on("warehouse/closeUpdateWarehouse",(flag)=>{
      this.showUpdateWarehouse=false
      //重新加载数据
      if (flag)
        this.flushData(false);
    })
    this.$bus.$on("warehouse/closeAddWarehouseDialog",(flag)=>{

      this.showAddWarehouse=false;
      if (flag)
      this.flushData(false)
    })
    axios.get("http://localhost:8080/api/warehouse/findAll").then(resp=>{
      let data = resp.data.data;
      this.warehouseList=data;
      if (this.warehouseList!=null&&this.warehouseList.length>=1){
        this.warehouseName=this.warehouseList[0].warehouseName;
        this.warehouseNumber=this.warehouseList[0].id;
        this.remark=this.warehouseList[0].remark;
        this.selectWarehouse=this.warehouseList[0].id

      }
      //取消加载

    })

    axios.get("http://localhost:8080/api/warehouseArea/findListByWarehouseId/"+1).then(resp=>{
      let data = resp.data.data;
      //库区信息
      this.warehouseAreaList=data;
    })
  }
}
</script>

<style scoped>
.container{
  width: 98%;
  box-shadow: 0 2px 0px 0 rgba(0, 0, 0, 0.1);

}
.info{
  margin-top: 40px;
}
.header{

  padding: 0px 5px;
}
.content{
  margin-top: 5px;
  font-size: 15px;
}
</style>